<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>凡客vancl</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/fvancl.css">
    <link rel="stylesheet" href="../css/slideshow.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/slideshow.js"></script>
    <script src="../js/fvancl.js"></script>
    <script src="../js/cookie.js"></script>
    <script>
        $(function () {
            var user = cookie.get('user');
            if (user) {
                user =JSON.parse(user);
                user.forEach((elm,i)=>{
                var users=elm.username;
                console.log(users);
                   $('.un').html(users);
                   $('.user').html('退出登录')
                    $('.name').html('切换用户');
                });
                $('.user').on('click',function(){
                    cookie.set('user','',-1);
                });
            }    
            
            var shop = cookie.get('shop');
            var sum = 0;
            if (shop) {
                shop = JSON.parse(shop);
                shop.forEach((elm, i) => {
                    sum += Number(elm.num);
                });
                $('.sum').html(sum);
            }
            
            
            
        });
        
    </script>
</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 顶部导航 -->
        <div class="list-top">
            <!-- 版心 -->
            <div class="wrapper">
                <div class="right">
                    <div class="log-reg">
                        <span>您好,欢迎光临凡客诚品！ </span>
                        <span>
                            <a class="un" href=""></a>
                            <a class="user" href="./login.html">登录</a>
                            |
                            <a class="name" href="./regist.html">注册</a>
                        </span>
                        <div class="order">
                            <a href="javascript:;">
                                我的订单
                            </a>
                        </div>
                        <div class="web">
                            <a href="javascript:;">网站公告</a>
                            <!-- 二维码。微博 -->
                            <a href="javascript:;" class="wx">
                                <span></span>
                                <b>

                                </b>
                            </a>
                            <a href="javascript:;" class="wb">
                                <span></span>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 搜索框大盒子 -->
        <div class="inp-box wrapper">
            <!-- 搜索框中盒子 -->
            <div class="inp-box-r">
                <div class="inp-t">
                    <!-- 搜索栏 -->
                    <div class="ipt">
                        <input type="text" value="搜“水柔棉”，体验与众不同"><input type="button" title="" value="搜索">
                    </div>
                    <!-- 购物车 -->
                    <div class="shopping">
                        <p>
                            <a href="./shopping.html">购物车(<span class="sum">0</span>)</a>
                        </p>
                    </div>
                </div>
                <!-- 热门搜索 -->
                <div class="inp-b">
                    <p>
                        热门搜索:
                        <a href="javascript:;">免烫衬衫</a>
                        <a href="javascript:;">羽绒服</a>
                        <a href="javascript:;">外套</a>
                        <a href="javascript:;">熊本熊</a>
                        <a href="javascript:;">户外运动</a>
                        <a href="javascript:;">帆布鞋</a>
                        <a href="javascript:;">水柔棉</a>
                    </p>
                </div>
            </div>

        </div>
        <!-- logo导航 -->
        <div class="logo-nav wrapper">
            <ul>
                <li class="logo">
                    <a href="javascript:;"></a>
                </li>
                <li>
                    <a href="javascript:;">首页</a>
                    <span></span>
                </li>
                <li class="bor">
                    <a href="javascript:;">衬衫</a>
                    <i></i>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">免烫</a></li>
                            <li><a href="javascript:;">易打理</a></li>
                            <li><a href="javascript:;">休闲</a></li>
                            <li><a href="javascript:;">高支</a></li>
                            <li><a href="javascript:;">法兰绒</a></li>
                            <li><a href="javascript:;">牛津纺</a></li>
                            <li><a href="javascript:;">牛仔</a></li>
                            <li><a href="javascript:;">棉麻</a></li>
                            <li><a href="javascript:;">水洗棉</a></li>
                            <li><a href="javascript:;">泡泡纱</a></li>
                            <li><a href="javascript:;">商务衬衫</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">T恤</a>
                    <i class="t-x"></i>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">本广</a></li>
                            <li><a href="javascript:;">李翔伟</a></li>
                            <li><a href="javascript:;">张广先</a></li>
                            <li><a href="javascript:;">药</a></li>
                            <li><a href="javascript:;">长场雄</a></li>
                            <li><a href="javascript:;">创可贴</a></li>
                            <li><a href="javascript:;">周南</a></li>
                            <li><a href="javascript:;">山鸟叔</a></li>
                            <li><a href="javascript:;">简鱼</a></li>
                            <li><a href="javascript:;">欧飞鸿</a></li>
                            <li><a href="javascript:;">好小猪</a></li>
                            <li><a href="javascript:;">剪纸猪</a></li>
                            <li><a href="javascript:;">赵老师的猪</a></li>
                            <li><a href="javascript:;">熊本熊</a></li>
                            <li><a href="javascript:;">水柔棉T</a></li>
                            <li><a href="javascript:;">运动T恤</a></li>
                            <li><a href="javascript:;">POLO</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">卫衣</a>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">熊本熊</a></li>
                            <li><a href="javascript:;">开衫</a></li>
                            <li><a href="javascript:;">连帽</a></li>
                            <li><a href="javascript:;">圆领</a></li>
                            <li><a href="javascript:;">水柔棉</a></li>>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">外套</a>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">运动户外</a></li>
                            <li><a href="javascript:;">皮肤衣</a></li>
                            <li><a href="javascript:;">西服</a></li>
                            <li><a href="javascript:;">C9设计款</a></li>
                            <li><a href="javascript:;">夹克</a></li>
                            <li><a href="javascript:;">nautilus</a></li>
                            <li><a href="javascript:;">大衣</a></li>
                            <li><a href="javascript:;">羽绒服</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">针织衫</a>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">空调衫</a></li>
                            <li><a href="javascript:;">棉线衫</a></li>
                            <li><a href="javascript:;">羊毛衫</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">裤装</a>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">针织裤</a></li>
                            <li><a href="javascript:;">休闲裤</a></li>
                            <li><a href="javascript:;">牛仔裤</a></li>
                            <li><a href="javascript:;">运动裤</a></li>
                            <li><a href="javascript:;">沙滩裤</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">鞋</a>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">复古跑鞋</a></li>
                            <li><a href="javascript:;">帆布鞋</a></li>
                            <li><a href="javascript:;">休闲鞋</a></li>
                            <li><a href="javascript:;">运动鞋</a></li>
                            <li><a href="javascript:;">皮鞋</a></li>
                            <li><a href="javascript:;">凉鞋</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">家居配饰</a>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">内衣袜品</a></li>
                            <li><a href="javascript:;">床品套件</a></li>
                            <li><a href="javascript:;">被子</a></li>
                            <li><a href="javascript:;">枕</a></li>
                            <li><a href="javascript:;">家居服</a></li>
                            <li><a href="javascript:;">家居鞋</a></li>
                            <li><a href="javascript:;">背提包</a></li>
                            <li><a href="javascript:;">拉杆箱</a></li>
                            <li><a href="javascript:;">皮带钱包</a></li>
                            <li><a href="javascript:;">手机壳</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">特惠</a>
                    <span></span>
                </li>
            </ul>
        </div>
    </header>
    <!-- 轮播图 -->
    <div class="c-banner wrapper">
        <div class="banner">
            <ul>
                <li><a href="javascript:;"><img src="../img/1200x535g.jpg"></a>
                </li>
                <li><a href="javascript:;"><img src="../img/sx.jpg"></a>
                </li>
                <li><a href="javascript:;"><img src="../img/1200-535.jpg"></a>
                </li>
                <li><a href="javascript:;"><img src="../img/1200x535.jpg"></a>
                </li>
                <li><a href="javascript:;"><img src="../img/1200-536.jpg"></a>
                </li>
                <li><a href="javascript:;"><img src="../img/1200x535dx.jpg"></a>
                </li>
                <li><a href="javascript:;"><img src="../img/1200-535g.jpg"></a>
                </li>
            </ul>
        </div>
        <div class="next">
        </div>
        <div class="get">
        </div>
        <div class="click-btn">
            <ul>
                <li jumpimg="0" style="background-color: rgb(150, 4, 4);"></li>
                <li jumpimg="1" style="background-color: gray;"></li>
                <li jumpimg="2" style="background-color: gray;"></li>
                <li jumpimg="3" style="background-color: gray;"></li>
                <li jumpimg="4" style="background-color: gray;"></li>
                <li jumpimg="5" style="background-color: gray;"></li>
                <li jumpimg="6" style="background-color: gray;"></li>
            </ul>
        </div>
    </div>
    <!-- 主体 -->
    <div class="main">
        <!-- 优惠券 -->
        <div class="wrapper quan">
            <img src="../img/tlg.jpg" alt="">
        </div>
        <!-- 秒杀倒计时-->
        <div class="T-m wrapper">
            <a href="javascript:;">
                <h2>
                    <span>
                        <em class="t-text">该场秒杀已结束</em>
                        00<em></em>00<em></em>00
                    </span>
                </h2>
            </a>
        </div>
        <!--秒杀商品-->
        <div class="product-box wrapper">
            <ul>
                <li class="product">
                    <a href="javascript:;">
                        <img src="../img/6384618-1j201903181646225485.jpg" alt="药丸">
                        <div class="p-title">
                            <span>T恤 药 药丸 黑色</span>
                        </div>
                        <div class="p-price">
                            <span class="or-price">
                                ￥
                                <em>118</em>
                            </span>
                            <span class="cur-price">
                                ￥
                                <em>18</em>
                            </span>
                            <span class="rech">
                                充值后
                                <em>9</em>
                                元
                            </span>
                        </div>
                    </a>
                </li>
                <li class="product">
                    <a href="javascript:;">
                        <img src="../img/6384574-1j201903111528018292.jpg" alt="ren">
                        <div class="p-title">
                            <span>T恤 张广先 fly 黑色</span>
                        </div>
                        <div class="p-price">
                            <span class="or-price">
                                ￥
                                <em>118</em>
                            </span>
                            <span class="cur-price">
                                ￥
                                <em>18</em>
                            </span>
                            <span class="rech">
                                充值后
                                <em>9</em>
                                元
                            </span>
                        </div>
                    </a>
                </li>
                <li class="product">
                    <a href="javascript:;">
                        <img src="../img/6384647-1j201903181529325812.jpg" alt="船">
                        <div class="p-title">
                            <span>T恤 顾湘 只有上帝知道我有多爱你1 白色</span>
                        </div>
                        <div class="p-price">
                            <span class="or-price">
                                ￥
                                <em>118</em>
                            </span>
                            <span class="cur-price">
                                ￥
                                <em>18</em>
                            </span>
                            <span class="rech">
                                充值后
                                <em>9</em>
                                元
                            </span>
                        </div>
                    </a>
                </li>
                <li class="product">
                    <a href="javascript:;">
                        <img src="../img/6384085-1j201901091036572787.jpg" alt="百年孤独">
                        <div class="p-title">
                            <span>T恤 山鸟叔 百年孤独6 白色</span>
                        </div>
                        <div class="p-price">
                            <span class="or-price">
                                ￥
                                <em>118</em>
                            </span>
                            <span class="cur-price">
                                ￥
                                <em>18</em>
                            </span>
                            <span class="rech">
                                充值后
                                <em>9</em>
                                元
                            </span>
                        </div>
                    </a>
                </li>
                <li class="product last">
                    <a href="javascript:;">
                        <img src="../img/6375168-1j201709151925339255.jpg" alt="水柔棉">
                        <div class="p-title">
                            <span>凡客外套 水柔棉 拉链开衫 男款 黑色</span>
                        </div>
                        <div class="p-price">
                            <span class="or-price">
                                ￥
                                <em>338</em>
                            </span>
                            <span class="cur-price">
                                ￥
                                <em>158</em>
                            </span>
                            <span class="rech">
                                充值后
                                <em>79</em>
                                元
                            </span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 商品列表 -->
        <div class="pro-nav wrapper">
            <!-- T恤上新 -->
            <table>
                <tbody>
                    <tr>
                        <td>
                            <a href="javascript:;">
                                <img src="../img/xhsm_g.jpg" alt="">
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <ul class="list">

            </ul>
            <script>
                $(function () {
                    $.ajax({
                        type: "get",
                        url: "../php/getall.php",
                        dataType: "json",
                        success: function (response) {
                            // console.log(response);
                            var template = '';
                            response.forEach((elm, i) => {
                                var pic = JSON.parse(elm.pic);
                                // console.log(pic);
                                template =
                                    `
                                    <li>
                                        <a href="details.html?id=${elm.id}" target="_blank">
                                            <img src=".${pic[0].src}" alt="">
                                        </a>
                                    </li>
                                    `
                                $('.list').append(template);
                            });
                        }
                    });

                });
            </script>
        </div>
        <!-- 优选推荐 -->
        <div class="piclist wrapper">
            <h2>优选推荐</h2>
            <ul>
                <li class="pic_one">
                    <a href="">
                        <img src="http://i5.vanclimg.com/cms/20190628/01.jpg" alt="4.0日式免烫衬衫" width="590" height="440">
                    </a>
                    <h3><span>充值购买更优惠</span>4.0日式免烫衬衫</h3>
                </li>
                <li class="pic_two">
                    <div> <a href="http://catalog.vancl.com/njfzt.html" class="track" name="hp-hp-jpzk-1_2-v:n"
                            target="_blank"> <img src="https://i2.vanclimg.com/cms/20190710/02.jpg" alt="帆布鞋"
                                width="290" height="180"> </a>
                        <h3> <span>充值购买相当于<em>69</em>元</span>牛津纺衬衫</h3>
                    </div>
                    <div> <a href="http://catalog.vancl.com/vanclxptj.html" class="track" name="hp-hp-jpzk-1_3-v:n"
                            target="_blank"> <img src="http://i2.vanclimg.com/cms/20190628/03.jpg" alt="特惠" width="290"
                                height="180"> </a>
                        <h3><span>充值购买相当于<em>19</em>元起</span> 凡客新品 </h3>
                    </div>
                </li>
                <li class="pic_three" style="margin-right: 0px;"> <a href="http://catalog.vancl.com/qmvt.html"
                        class="track" name="hp-hp-jpzk-1_4-v:n" target="_blank"><img
                            src="https://i2.vanclimg.com/cms/20190710/04.jpg" alt="运动户外" width="286" height="440"></a>
                    <h3> <span>充值购买相当于<em>19</em>元</span>全棉舒适素色T</h3>
                </li>
            </ul>
        </div>
        <div class="piclist wrapper">
            <ul>
                <li class="pic_one">
                    <a href="">
                        <img src="http://i4.vanclimg.com/cms/20190628/05.jpg" alt="凡客牛津纺衬衫" width="590" height="440">
                    </a>
                    <h3><span>充值购买相当于<em>79</em>元起</span>POLO 新品上市</h3>
                </li>
                <li class="pic_two">
                    <div> <a href="" class="track" name="hp-hp-jpzk-1_2-v:n" target="_blank">
                            <img src="https://i1.vanclimg.com/cms/20190710/07.jpg" alt="帆布鞋" width="290" height="180">
                        </a>
                        <h3> <span>充值购买相当于<em>59</em>元</span>麻棉衬衫</h3>
                    </div>
                    <div> <a href="http://catalog.vancl.com/vanclxptj.html" class="track" name="hp-hp-jpzk-1_3-v:n"
                            target="_blank">
                            <img src="https://i2.vanclimg.com/cms/20190710/08.jpg" alt="特惠" width="290" height="180">
                        </a>
                        <h3><span>充值购买更优惠</span> 沙滩裤 </h3>
                    </div>
                </li>
                <li class="pic_three" style="margin-right: 0px;"> <a href="http://catalog.vancl.com/qmvt.html"
                        class="track" name="hp-hp-jpzk-1_4-v:n" target="_blank">
                        <img src="http://i1.vanclimg.com/cms/20190527/hw.jpg" alt="运动户外" width="286" height="440"></a>
                    <h3> <span>充值购买更优惠</span>户外运动</h3>
                </li>
            </ul>
        </div>
        <!-- 右边固定导航 -->
        <div class="nav-r">
            <ul>
                <li><a href="./gift.html"></a></li>
                <li><a href="javascrit:;"></a></li>
                <li><a href="javascrit:;"></a></li>
                <li><a href="#">回顶部</a></li>
            </ul>
        </div>
    </div>
    <!-- 尾部 -->
    <footer>
        <div class="btm">
            <div class="text-p">
                <p>Copyright 2007 - 2019 vancl.com All Rights Reserved 京ICP证100557号 京公网安备11011502002400号
                    出版物经营许可证新出发京批字第直110138号</p>
                <p> 凡客诚品（北京）科技有限公司</p>
            </div>

            <div class="partner">
                <a href="javascript:;"></a>
                <span></span>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
        </div>
    </footer>
</body>

</html>